<template>
  <div class="parkMessage">
    <div class="left">
      <el-form ref="form" :model="form" label-position="top" label-width="80px">
        <el-form-item label="车位名">
          <el-input
            v-model="form.parkname"
            placeholder="请输入车位名"
          ></el-input>
        </el-form-item>
        <el-form-item label="车位金额">
          <el-input
            v-model="form.parkpay"
            placeholder="请输入车位金额"
          ></el-input>
        </el-form-item>
        <el-form-item label="车位类型">
          <el-select v-model="form.parktype" placeholder="请选择车位类型">
            <el-option label="地下" :value="1"></el-option>
            <el-option label="地上" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车位状态">
          <el-select v-model="form.parkstatus" placeholder="请选择车位状态">
            <el-option label="已有车" :value="1"></el-option>
            <el-option label="未有车" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSearch"
            >查询</el-button
          >
          <el-button type="primary" @click="reserve" icon="el-icon-refresh"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="right">
      <div class="right_add">
        <h2>车位列表</h2>
        <div>
          <el-button
            icon="el-icon-plus"
            type="success"
            @click="dialogVisible = true"
            >新增</el-button
          >
        </div>
      </div>
      <div class="right_table">
        <el-table
          :data="tableData"
          v-loading="loading"
          border
          stripe
          style="width: 100%"
        >
          <el-table-column
            type="index"
            align="center"
            prop="date"
            label="序号"
            width="100"
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="parkname"
            sortable
            label="车位名称"
            width=""
          >
          </el-table-column>
          <el-table-column
            align="center"
            prop="parkpay"
            sortable
            label="车位金额"
          >
          </el-table-column>
          <el-table-column align="center" prop="parktype" label="车位类型">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.parktype"
                active-color="#0000ff"
                inactive-color="#dddddd"
                :active-value="1"
                :inactive-value="2"
                active-text="地下"
                inactive-text="地上"
                @change="changeType(scope.row, scope.$index)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            width="250"
            prop="parkstatus"
            label="车位状态"
          >
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.parkstatus"
                active-color="#0000ff"
                inactive-color="#dddddd"
                :active-value="1"
                :inactive-value="2"
                active-text="已有车"
                inactive-text="未有车"
                @change="changeStates(scope.row, scope.$index)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="" width="300" label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                icon="el-icon-share"
                plain
                :disabled="scope.row.parkstatus == 1"
                @click="openLeftModal(scope.row)"
                >分配车位</el-button
              >
              <el-button
                size="mini"
                plain
                @click="openEeditPark(scope.row, scope.$index)"
                icon="el-icon-edit"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="clearTableRow(scope.row, scope.$index)"
                icon="el-icon-delete"
                plain
                >移除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="right_page" style="text-align: right">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="1"
          :page-sizes="[7, 10, 20, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.total"
        >
        </el-pagination>
      </div>
    </div>
    <div class="modal">
      <el-dialog
        title="新增车位"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose"
      >
        <el-form
          :model="diaForm"
          :rules="rulesDiaForm"
          ref="diaForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="车位名称" prop="parkname">
            <el-input
              v-model="diaForm.parkname"
              placeholder="请输入车位名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="车位金额" prop="parkpay">
            <el-input
              v-model="diaForm.parkpay"
              placeholder="请输入车位金额"
            ></el-input>
          </el-form-item>
          <el-form-item label="车位类型" prop="parktype">
            <el-select v-model="diaForm.parktype" placeholder="请选择车位类型">
              <el-option label="地下" :value="1"></el-option>
              <el-option label="地上" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车位状态" prop="parkstatus">
            <el-select
              v-model="diaForm.parkstatus"
              placeholder="请选择车位状态"
            >
              <el-option label="已有车" :value="2"></el-option>
              <el-option label="未有车" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <div style="text-align: right">
            <el-form-item>
              <el-button type="primary" @click="dialogVisible = false"
                >取 消</el-button
              >
              <el-button type="primary" @click="submitDiaForm('diaForm')"
                >提交</el-button
              >
              <el-button type="primary" @click="clearDiaForm">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </el-dialog>
      <el-drawer
        title="车位分配"
        :visible="drawer"
        direction="ltr"
        :before-close="closeLeftModal"
        size="50%"
      >
        <el-table
          ref="singleTable"
          :data="leftModalTable"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            :reserve-selection="true"
            width="55"
          >
          </el-table-column>
          <el-table-column type="index" label="序号" width="120">
          </el-table-column>
          <el-table-column prop="username" label="用户账号" width="120">
          </el-table-column>
          <el-table-column
            prop="homeaddress"
            label="家庭住址"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column prop="type" label="类型" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="parkname" label="车位" show-overflow-tooltip>
          </el-table-column>
        </el-table>
        <div style="text-align: right">
          <el-pagination
            @size-change="leftModalSizeChange"
            @current-change="leftModalCurrentChange"
            :current-page="leftPageNumber"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="leftPageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="leftTotal"
          >
          </el-pagination>
        </div>
        <div class="btns" style="text-align: center">
          <el-button plain @click="drawer = false">取消</el-button>
          <el-button type="primary" @click="parkTrue">确定</el-button>
        </div>
      </el-drawer>
      <el-dialog
        title="车位修改"
        :visible.sync="dialogVisibleEdit"
        width="30%"
        :before-close="handleCloseEdit"
      >
        <el-form
          :model="editForm"
          :rules="editRules"
          ref="editForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="车位名称" prop="parkname">
            <el-input v-model="editForm.parkname"></el-input>
          </el-form-item>
          <el-form-item label="车位金额" prop="parkpay">
            <el-input v-model="editForm.parkpay"></el-input>
          </el-form-item>
          <el-form-item label="车位类型" prop="parktype">
            <el-select v-model="editForm.parktype" placeholder="请选择车位类型">
              <el-option label="地下" :value="1"></el-option>
              <el-option label="地上" :value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="车位状态" prop="parkstatus">
            <el-select
              v-model="editForm.parkstatus"
              placeholder="请选择车位状态"
            >
              <el-option label="已有车" :value="1"></el-option>
              <el-option label="未有车" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisibleEdit = false">取 消</el-button>
          <el-button type="primary" @click="editSave">保存</el-button>
          <el-button type="primary" @click="clearEditForm">重置</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //编辑表单
      editForm: {
        parkname: "",
        parkpay: "",
        parktype: "",
        parkstatus: "",
      },
      editRules: {
        parkname: [
          { required: true, message: "请输入车位名称", trigger: "blur" },
        ],
        parkpay: [
          { required: true, message: "请输入车位金额", trigger: "blur" },
        ],
        parktype: [
          { required: true, message: "请输入车位类型", trigger: "blur" },
        ],
        parkstatus: [
          { required: true, message: "请输入车位状态", trigger: "blur" },
        ],
      },
      //编辑对话框
      dialogVisibleEdit: false,
      //左模态
      leftPageSize: 10,
      leftPageNumber: 1,
      leftTotal: 0,
      //暂存信息
      rightId: "",
      parkPay: "",
      parkType: "",
      currentSelect: null, // 存储当前选中行
      //左侧模态框表
      leftModalTable: null,
      //左侧模态框控制
      drawer: false,
      //对话框表单
      diaForm: {
        parkname: null,
        parkpay: null,
        parktype: null,
        parkstatus: null,
      },
      //对话框表单验证
      rulesDiaForm: {
        parkname: [
          { required: true, message: "车位名称不能为空", trigger: "blur" },
        ],
        parkpay: [
          { required: true, message: "车位金额不能为空", trigger: "blur" },
        ],
        parktype: [
          { required: true, message: "车位类型不能为空", trigger: "blur" },
        ],
      },
      //对话框
      dialogVisible: false,
      //更新状态
      loading: false,
      //分页
      pageNumber: 1,
      pageSize: 10,
      total: 0,
      //表格数据
      tableData: [],
      //左侧查询
      form: {
        parkname: null,
        parkpay: null,
        parktype: null,
        parkstatus: null,
      },
    };
  },
  methods: {
    //删除表行
    clearTableRow(row, index) {
      this.$confirm("此操作将删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .get("parking/delParkData", {
              params: {
                id: row.id,
                token: sessionStorage.getItem("token"),
              },
            })
            .then(() => {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.getData();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //重置表单编辑
    clearEditForm() {
      this.editForm = {
        parkname: "",
        parkpay: "",
        parktype: "",
        parkstatus: "",
      };
    },
    //编辑后保存
    editSave() {
      this.$refs["editForm"].validate((valid) => {
        if (valid) {
          this.$axios
            .post("parking/editParkData", {
              u_id: this.rightId,
              parkname: this.editForm.parkname,
              parkpay: this.editForm.parkpay,
              parktype: this.editForm.parktype,
              parkstatus: this.editForm.parkstatus,
              token: sessionStorage.getItem("token"),
            })
            .then(() => {
              this.dialogVisibleEdit = false;
              this.getData();
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //关闭编辑模态框
    handleCloseEdit(row, index) {
      this.dialogVisibleEdit = false;
    },
    //编辑
    openEeditPark(row, index) {
      this.rightId = row.id;
      this.dialogVisibleEdit = true;
      this.editForm.parkname = row.parkname;
      this.editForm.parkpay = row.parkpay;
      this.editForm.parktype = row.parktype;
      this.editForm.parkstatus = row.parkstatus;
    },
    //左模态分页
    leftModalSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.leftPageSize = val;
      this.getLeftModalTable();
    },
    leftModalCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.leftPageNumber = val;
      this.getLeftModalTable();
    },
    //确定分配车位
    parkTrue() {
      //   第二个接口
      this.$confirm("确定分配 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .post("parking/editParkData", {
              u_id: this.rightId,
              parkname: this.currentSelect.parkname,
              parkpay: this.parkPay,
              parktype: this.parkType,
              parkstatus: 1,
              token: sessionStorage.getItem("token"),
            })
            .then((res) => {
              console.log(res);
              this.drawer = false;
              this.$message({
                type: "success",
                message: "分配成功!",
              });
              this.getData();
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消分配",
          });
        });
      console.log("kkkkkk");
    },
    //选择行
    handleSelectionChange(selection) {
      // 当选中数量变化时
      if (selection.length > 1) {
        // 如果多选了，只保留最后一个
        const lastSelection = selection[selection.length - 1];
        this.$refs.singleTable.clearSelection();
        this.$nextTick(() => {
          this.$refs.singleTable.toggleRowSelection(lastSelection);
          this.currentSelect = lastSelection;
        });
      } else {
        // 正常单选或取消选择
        this.currentSelect = selection.length ? selection[0] : null;
      }
      console.log(this.currentSelect, "currentSelect");
    },
    // 控制复选框是否可选
    checkSelectable(row) {
      // 只有当前未选择或当前行已选中时才可操作
      return !this.selectedRow || row === this.selectedRow;
    },
    //初始话左模态表
    getLeftModalTable() {
      this.$axios
        .get("users/getUsersData", {
          params: {
            currPage: this.leftPageNumber - 1,
            pageNum: this.pageSize,
          },
        })
        .then((res) => {
          //   console.log(res, "res");
          this.leftModalTable = res.data.data;
          this.leftTotal = res.data.total;
        });
    },
    //关闭左侧模态
    closeLeftModal() {
      this.drawer = false;
    },
    //打开左侧模态
    openLeftModal(row) {
      console.log(row, "row");
      this.rightId = row.id;
      this.parkPay = row.parkpay;
      this.parkType = row.parktype;
      this.drawer = true;
    },
    //重置增加车位表单
    clearDiaForm() {
      this.diaForm.parkname = null;
      this.diaForm.parkpay = null;
      this.diaForm.parktype = null;
      this.diaForm.parkstatus = null;
    },
    //提交增加车位
    submitDiaForm(formName) {
      //   console.log(this.diaForm, "diaForm");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$axios
            .post("parking/addParkData", {
              parkname: this.diaForm.parkname,
              parkpay: this.diaForm.parkpay,
              parktype: this.diaForm.parktype,
              parkstatus: this.diaForm.parkstatus,
              token: sessionStorage.getItem("token"),
            })
            .then(() => {
              this.$message({
                message: "添加成功",
                type: "success",
              });
              this.dialogVisible = false;
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //关闭对话框
    handleClose() {
      this.dialogVisible = false;
    },

    //改变状态
    changeStates(row, index) {
      this.loading = true;
      this.$axios
        .post("parking/editParkData", {
          u_id: row.id,
          parkname: this.tableData[index].parkname,
          parkpay: this.tableData[index].parkpay,
          parktype: this.tableData[index].parktype,
          parkstatus: this.tableData[index].parkstatus,
          token: sessionStorage.getItem("token"),
        })
        .then((res) => {
          //   console.log(res);
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.loading = false;
        });
    },
    //改变类型
    changeType(row, index) {
      //   console.log(row, "row", index, "index");
      this.loading = true;
      this.$axios
        .post("parking/editParkData", {
          u_id: row.id,
          parkname: this.tableData[index].parkname,
          parkpay: this.tableData[index].parkpay,
          parktype: this.tableData[index].parktype,
          parkstatus: this.tableData[index].parkstatus,
          token: sessionStorage.getItem("token"),
        })
        .then((res) => {
          //   console.log(res);
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.loading = false;
        });
    },
    // 搜索栏重置
    reserve() {
      this.form.parkname = null;
      this.form.parkpay = null;
      this.form.parktype = null;
      this.form.parkstatus = null;
    },
    //初始化表格数据
    getData() {
      this.$axios
        .get("parking/getParkData", {
          params: {
            parkname: "",
            parkpay: "",
            parktype: "",
            parkstatus: "",
            currPage: this.pageNumber - 1,
            pageNum: this.pageSize,
          },
        })
        .then((res) => {
          //   console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNumber = val;
      this.getData();
    },
    //左侧查询
    onSearch() {
      this.$axios
        .get("parking/getParkData", {
          params: {
            parkname: this.form.parkname,
            parkpay: this.form.parkpay,
            parktype: this.form.parktype,
            parkstatus: this.form.parkstatus,
            currPage: this.pageNumber - 1,
            pageNum: this.pageSize,
          },
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data.data;
          this.total = res.data.total;
        });
    },
  },
  created() {
    this.getData();
    this.getLeftModalTable();
  },
};
</script>
<style lang="scss" scoped>
.parkMessage::v-deep {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  .left {
    width: 25%;
    box-sizing: border-box;
    padding: 10px;
    .el-select {
      width: 100%;
    }
  }
  .right {
    width: 75%;
    box-sizing: border-box;
    .right_add {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    .right_table {
      thead {
        tr {
          th {
            font-size: 14px;
            background-color: #eaeaea;
            color: black;
          }
        }
      }
    }
  }
  .modal {
    .el-dialog {
      .el-select {
        width: 100%;
      }
    }
  }
}
</style>